<template>
  <div class="order_details_custermer">
    <el-button type="text" id="custermer_return" @click="toreturnCt">返回</el-button>
    <div class="order_details_card">
      <div class="order_details_card_content">
        <div class="order_details_card_left">
          <div>订单编号：</div>
          <div>下单时间：</div>
          <div>订单状态：</div>
          <div>员工编号：</div>
          <div>顾客：</div>
          <div>顾客手机号：</div>
        </div>
        <div class="order_details_card_right">
          <div>{{this.orderInfo.id}}</div>
          <div>{{this.orderInfo.orderTime | dateParse}}</div>
          <div>{{this.orderInfo.status}}</div>
          <div>{{this.orderInfo.waiterId}}</div>
          <div>{{this.orderInfo.customer==null?'':this.orderInfo.customer.username}}</div>
          <div>{{this.orderInfo.customer==null?'':this.orderInfo.customer.telephone}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  created() {
    this.loadOrder();
  },
  computed: {
    ...mapState("orderDetails", ["orderInfo"])
  },
  methods: {
    ...mapActions("orderDetails", ["toLoadOrderInfo"]),
    //加载数据
    loadOrder() {
      this.toLoadOrderInfo(this.$route.query.id);
    },
    //返回
    toreturnCt() {
      this.$router.push('custermerDetails');
    }
  }
};
</script>
<style scope>
.order_details_custermer {
  padding: 10px;
}
.order_details_card {
  width: 360px;
  height: 345px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #ddd;
}
.order_details_card_content {
  padding: 20px;
  width: 100%;
  height: 50%;
  line-height: 50px;
}
.order_details_card_left {
  width: 40%;
  height: 100%;
  float: left;
}
.order_details_card_left > div {
  margin-right:10px;
  text-align: right;
}
.order_details_card_right {
  width: 60%;
  height: 100%;
  float: right;
}
#order_return {
  padding: 10px;
}
</style>